import { View, Image, Button, Text, Radio } from '@tarojs/components'
import { BasePage } from '@common/components/base-page'
import arrow from '../../assets/img/right-arrpw.png'
import add from '../../assets/img/add.png'
import Jump from '@utils/jump'
import AppRoute from '@utils/route/index'
import dy from '../../assets/img/dy.png'
import xhs from '../../assets/img/xhs.png'
import editA from '../../assets/img/edit-a.png'
import round from '../../assets/img/location.png'
import aqy from '../../assets/img/aqy.png'
import watch from '../../assets/img/watch.png'
import changeImg from '../../assets/img/change-img.png'
import checking from '../../assets/img/checking.png'
import refused from '../../assets/img/refused.png'
import style from './index.module.scss'
import common from '../../assets/style/common.scss'
interface IProps {
    contentInfo: string
}
interface IState {
}

export default class Card extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        const { contentInfo } = this.props
        return (
            <>
                {
                    contentInfo === 'Address' &&
                    <View>
                        <View className={`${style.addressList} ${style.aBase}`}>
                            <View className={style.content}>
                                <View className={style.aLeft}>
                                    <View className={style.aTop}>
                                        <Text className={style.name}>王某某</Text>
                                        <Text className={style.pnone}>18999095743</Text>
                                    </View>
                                    <View className={style.aBottom}>
                                        北京市 东城区 毛家湾胡同甲13号 幸福
                                    </View>
                                    <View className={`${style.radio} ${common.vertical}`}>
                                        <Radio  checked={true} style={{ transform: 'scale(0.6)' }} value='选中' color='#415FFF'></Radio>
                                        <Text className={style.textSm}>默认收货地址</Text>
                                    </View>
                                </View>
                                <View className={style.aRight}>
                                    <Image src={editA}></Image>
                                </View>
                            </View>
                            <View className={style.content}>
                                <View className={style.aLeft}>
                                    <View className={style.aTop}>
                                        <Text className={style.name}>李华</Text>
                                        <Text className={style.pnone}>18999095743</Text>
                                    </View>
                                    <View className={style.aBottom}>
                                        北京市 东城区 毛家湾胡同甲13号 幸福
                                    </View>
                                </View>
                                <View className={style.aRight}>
                                    <Image src={editA}></Image>
                                </View>
                            </View>
                        </View>
                        <View className={`${style.newAddress} ${style.common}`}>
                            <Button onClick={() => { Jump.jump({ url: AppRoute.MODULES.AddADDRESS }) }} className={style.aBtn}><Image src={add}></Image>新建收货地址</Button>
                        </View>
                    </View>
                }
                {
                    contentInfo === 'Media' &&
                    <View>
                        <View className={`${style.mediaList} ${style.aBase}`}>
                            <View className={style.main}>
                                <View className={style.mTop}>
                                    <View className={style.mLeft}>
                                        <View className={`${style.vertical} ${style.way}`}>
                                            <Image className={style.icon} src={dy}></Image>
                                            <Text className={style.source}>抖音</Text>
                                        </View>
                                        <View className={style.mBottom}>
                                            <Text className={style.mTitle}>昵称</Text>
                                            <Text className={style.mInfo}>米库米路</Text>
                                        </View>
                                        <View className={style.mBottom}>
                                            <Text className={style.mTitle}>粉丝</Text>
                                            <Text className={style.mInfo}>239</Text>
                                        </View>
                                        <View className={style.mBottom}>
                                            <Text className={style.mTitle}>主页链接</Text>
                                            <Text className={style.mInfo}>https://live.douyin.</Text>
                                        </View>
                                    </View>
                                </View>
                                <View className={style.aRight}>
                                    <Image src={editA}></Image>
                                </View>
                            </View>
                            <View className={style.main}>
                                <View className={style.mTop}>
                                    <View className={style.mLeft}>
                                        <View className={`${style.vertical} ${style.way}`}>
                                            <Image className={style.icon} src={xhs}></Image>
                                            <Text className={style.source}>小红书</Text>
                                        </View>
                                        <View className={style.mBottom}>
                                            <Text className={style.mTitle}>昵称</Text>
                                            <Text className={style.mInfo}>米库米路</Text>
                                        </View>
                                        <View className={style.mBottom}>
                                            <Text className={style.mTitle}>粉丝</Text>
                                            <Text className={style.mInfo}>239</Text>
                                        </View>
                                        <View className={style.mBottom}>
                                            <Text className={style.mTitle}>主页链接</Text>
                                            <Text className={style.mInfo}>https://live.douyin.</Text>
                                        </View>
                                    </View>
                                </View>
                                <View className={style.aRight}>
                                    <Image src={editA}></Image>
                                </View>
                            </View>
                        </View>
                        <View className={`${style.newAddress} ${style.common}`}>
                            <Button onClick={() => { Jump.jump({ url: AppRoute.MODULES.AddMEDIA }) }} className={style.aBtn}><Image src={add}></Image>添加社媒账号</Button>
                        </View>
                    </View>
                }
                {
                    contentInfo === 'Invite' && <View>
                        <View className={`${style.addressList} ${style.aBase}`}>
                            <View className={style.content}>
                                <View className={style.aLeft}>
                                    <View className={style.aTop}>
                                        <Text className={`${style.pnone} ${style.text30}`}>光年之外</Text>
                                    </View>
                                    <View className={style.aBottom} style="color:#888;font-size:24rpx">
                                        2023.09.02
                                    </View>
                                </View>
                                <View>
                                    <Text>审核中</Text>
                                </View>
                            </View>
                            <View className={style.content}>
                                <View className={style.aLeft}>
                                    <View className={style.aTop}>
                                        <Text className={`${style.pnone} ${style.text30}`}>凯凯凯</Text>
                                    </View>
                                    <View className={style.aBottom} style="color:#888;font-size:24rpx">
                                        2023.09.02
                                    </View>
                                </View>
                                {/* <View>
                                    <Text style="color:#999">未通过</Text>
                                </View> */}
                                <View>
                                    <Text style="color:#415FFF">+50</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                }
                {
                    contentInfo === 'Order' &&
                    <View>
                        <View className={`${style.orderList} ${style.aBase}`}>
                            {/* <View className={`${style.content} ${style.orders} ${style.orderContent}`}>

                                <View className={`${style.aLeft} ${style.locationRound}`}>
                                    <View>
                                        <Image className={style.round} src={round}></Image>
                                    </View>
                                    <View>
                                        <View className={style.aTop}>
                                            <Text className={style.name}>王某某</Text>
                                            <Text className={style.pnone}>18999095743</Text>
                                        </View>
                                        <View className={style.aBottom}>
                                            北京市 东城区 毛家湾胡同甲13号 幸福
                                        </View>
                                    </View>
                                </View>
                                <View className={style.aRight}>
                                    <Image className={style.arrow} src={arrow}></Image>
                                </View>
                            </View> */}
                            <View className={style.orderInfo}>
                                <View className={style.orderTop}>
                                    <View className={style.infoLeft}>
                                        {/* <Image className={style.imgs} src={watch}></Image> */}
                                        <Image className={style.imgs} src={aqy}></Image>
                                    </View>
                                    <View className={style.infoRight}>
                                        {/* <View className={style.titles}>vivo WATCH GT eSIM版 夏夜黑 软胶</View> */}
                                        <View className={style.titles}>爱奇艺会员卡周卡</View>
                                        <View className={style.sCon}>
                                            <Text className={style.num}>9999</Text>
                                            <Text className={style.sTitle}>创作值</Text>
                                        </View>
                                    </View>
                                </View>
                                <View className={style.orderBottom}>
                                    <View className={`${style.orderNum} ${style.tips}`}>
                                        <Text>订单备注</Text>
                                        <View className={style.orderTip}><Text style="padding-right:8px;">黑色</Text><Image className={style.arrow} src={arrow}></Image>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View className={`${style.orderPay} ${style.common}`}>
                            <View className={`${style.center} ${style.pay}`}>
                                <Text>支付：</Text>
                                <Text className={style.num} style="font-size:52rpx;padding-right:16rpx">28888</Text>
                                <Text className={style.sTitle}>创作值</Text>
                            </View>
                            <View className={style.btnsOrder}>
                                <Button onClick={() => { Jump.jump({ url: AppRoute.MODULES.CHANGE }) }}><Text>确认支付</Text></Button>
                            </View>
                        </View>
                    </View>
                }
                {
                    contentInfo === 'Change' && <View>
                        <View className={`${style.orderInfo} ${style.all}`} style="margin-top: 20rpx;">
                            <View className={`${style.align} ${style.border}`}>
                                <Image className={style.changesty} src={changeImg}></Image>
                                <View className={style.text}>兑换成功</View>
                            </View>
                            <View className={style.orderBottom}>
                                <View className={`${style.orderNum} ${style.tips}`}>
                                    <Text>商品名称</Text>
                                    <View className={style.orderTip}><Text style="color:#333">vivo WATCH GT eSIM版</Text>
                                    </View>
                                </View>
                                <View className={`${style.orderNum} ${style.tips}`}>
                                    <Text>消耗创作值</Text>
                                    <View className={style.orderTip}><Text style="color: #333333;">28888</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View className={`${style.orderPay} ${style.common}`}>
                            <View className={`${style.btnsOrder} ${style.ins}`}>
                                <Button className={style.look} onClick={() => { Jump.jump({ url: AppRoute.MODULES.CHANGE }) }}><Text>查看订单</Text></Button>
                            </View>
                            <View className={`${style.btnsOrder} ${style.ins}`}>
                                <Button className={style.backSty} onClick={() => { Jump.jump({ url: AppRoute.APP.INDEX }) }}><Text>返回首页</Text></Button>
                            </View>
                        </View>
                    </View>
                }
                {
                    contentInfo === 'Register' && <View>
                        {/* <View className={`${style.orderInfo} ${style.all}`} style="margin-top: 20rpx;">
                            <View className={style.align}>
                                <Image className={style.changesty} src={checking}></Image>
                                <View className={style.text} style="padding-bottom:26rpx;">审核中</View>
                                <View>
                                    <Text className={style.checking}>审核预计需要3-5个工作日</Text>
                                    <View className={style.checking}>请耐心等待</View>
                                </View>
                            </View>
                        </View> */}
                        <View className={`${style.orderInfo} ${style.all}`} style="margin-top: 20rpx;">
                            <View className={style.align}>
                                <Image className={style.changesty} src={refused}></Image>
                                <View className={style.text} style="padding-bottom:26rpx;">审核未通过</View>
                                <View>
                                    <Text className={style.checking}>对不起，您的个人信息审核未通过，您</Text>
                                    <View className={style.checking}>可以重新填写提交进行审核</View>
                                </View>
                                <View className={style.rewrite}>
                                    <Button>重新填写</Button>
                                </View>
                            </View>
                        </View>
                    </View>
                }
                {
                    contentInfo === 'Notice' &&
                    <>
                        <View>
                            <View className={style.noticeTime}>
                                <Text>2024.03.05 12:27:30</Text>
                            </View>
                            <View className={`${style.mediaList} ${style.aBase}`}>
                                <View className={style.main} style="padding:32rpx 84rpx 30rpx 34rpx">
                                    <View className={style.mTop}>
                                        <View className={style.mLeft}>
                                            <View className={`${style.vertical} ${style.way}`}>
                                                <Text className={style.source}>任务状态通知</Text>
                                            </View>
                                            <View className={style.mBottom}>
                                                <Text className={style.notice}>您提交的任务“我看到的VS我拍到的”在小红书审核已通过，50创作值已到账，</Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View>
                            <View className={style.noticeTime}>
                                <Text>2024.03.05 12:27:30</Text>
                            </View>
                            <View className={`${style.mediaList} ${style.aBase}`}>
                                <View className={style.main} style="padding:32rpx 84rpx 30rpx 34rpx">
                                    <View className={style.mTop}>
                                        <View className={style.mLeft}>
                                            <View className={`${style.vertical} ${style.way}`}>
                                                <Text className={style.source}>用户审核通知</Text>
                                            </View>
                                            <View className={style.mBottom}>
                                                <Text className={style.notice}>您提交的任务“我看到的VS我拍到的”在小红书审核已通过，50创作值已到账，</Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </>
                }

            </>
        )
    }
}
